<template>
	<div class="activiesBar" ref="activities">
        <span class="package" style="margin-right:.2rem;float:left;">{{saleType.coupon[0]}}</span>
        <div style="float:left;width:93%;">
            <div class="title">
                <span class="activityName">{{coupons.couponName}}</span><span @click="acquireCoupon" ref="acquireBtn" style="color: blue;float:right;float:right;margin-right:1rem;"><span class="clickAcquire" ref="clickAcquire">领取</span></span>
                <!-- <span class="activityTime" v-if="coupons.availableStartTime">活动时间：{{GetDateDiff(coupons.availableStartTime).split(" ")[0].split("/")[1]}}.{{GetDateDiff(coupons.availableStartTime).split(" ")[0].split("/")[2]}}-{{GetDateDiff(coupons.availableEndTime.split(" ")[0]).split("/")[1]}}.{{GetDateDiff(coupons.availableEndTime.split(" ")[0]).split("/")[2]}}<span class="arrow" ref="arrow"></span></span> -->
            </div>
        </div>
    </div> 
</template>
<script>
    import Vue from "vue";
    import axios from "axios";
    import {Toast} from "@/utils/toast.js";
    import {mapState, mapGetters, mapMutations} from 'vuex';
	export default {
		props: {
            coupons: {
                type: Object,
                default: {}
            },
        },
        components:{
            
        },
         computed: {
            ...mapGetters('wxh', {
                login: "login",
                userInfo: 'userInfo',
                sessionId: 'sessionId'
            }),
        },
		data () {
			return {
                saleType:{
                    "buyPresent":["赠","buyPresent"],
                    "specialOffer":["特","specialOffer"],
                    "discount":["折","discount"],
                    "overBuy":["多","overBuy"],
                    "rebate":["返","rebate"],
                    "fullCut":["减","fullCut"],
                    "fullDiscount":["满","fullDiscount"],
                    "package":["组","package"],
                    "coupon":["券","coupon"]
                },
			}
		},
		computed: {
            
		},
		methods: {
            GetDateDiff(time) {    
                return time.replace(/\-/g, "/");  
            },
            acquireCoupon(){
                
                console.log(this.$store.state["wxh"].login,"login?");
                let clickAcquire = this.$refs.clickAcquire;
                console.log(clickAcquire.style.color,"color");
                if(clickAcquire.style.color == "gray"){
                    console.log("can not be acquired");
                    return false;
                }
                if(this.$store.state["wxh"].login){
                // MessageBox.confirm(
                //     '确定领取优惠券(' + this.coupons.couponName + ')么?'
                // ).then(action => {
                    let options = {
                        method: "get",
                        url: window.api.trade_host + '/marketCenter/receiveCouponCodesOnline/' + this.coupons.couponCode,
                        headers: { sessionId: localStorage.getItem("sessionId") }
                    }
                    axios(options).then(data => {
                        data.data.returnCode == 0 ?
                         Toast({
                             duration: 2000,
                             message: data.data.msg,
                             type: "fail"
                         }) :
                         Toast({
                             duration: 2000,
                             message: "领取成功",
                             type: "success"
                         });
                        data.data.returnCode ? clickAcquire.style.color = "gray" : "";
                        data.data.returnCode ? clickAcquire.style.border = "1px solid gray" : "";
                    })
                // })
                }else{
                    this.$router.push("login");
                }
                
                
            },

        },
        created () {
            
        },
        mounted () {
            console.log(this.coupons,"coupons")
        },
        beforeDestroy() {
            
        },
        watch: {
            
        }

	}
</script>

<style scoped>
    .activiesBar{
        margin-left: .7rem;
        height: 1.3rem;
        transition: .5s all;
        overflow: hidden;
        padding: 0.1rem 0;
    }
    .package{
        font-size:12px;
        background: #EF5423;
        padding:0 2px;
        margin-top:3px;
        border-radius: .2rem;
        color: white;
    }
    .blank{
        margin-right: 0.2rem;
        font-size:12px;
        background: white;
        padding: 2px;
        border-radius: .2rem;
        color: white;
    }
    .activityName{
        display: inline-block;
        width: 5rem;
        height: 100%;
        color: rgb(102, 102, 102);
        text-align: left;
        line-height: 24px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .activityTime{
        display: inline-block;
        height: 100%;
        line-height: 23px;
        color: rgb(102, 102, 102);
        text-align: left;
    }
    .title{
        height: 23px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .arrow{
        display: inline-block;
        margin-left: 7px;
        width: 14px;
        height: 0;
        transition: .5s all;
        border-top: 0px solid transparent;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 0px solid transparent;
    }
    .activeCond{
        width: 95%;
        height: 23px;
        text-align: left;
    }
    .activeInfo{
        width: 95%;
        height: 23px;
        text-align: left;
    }
    .clickAcquire{
        display: inline-block;
        width: 2.2rem;
        height: 1rem;
        line-height: 1rem;
        font-size:.6rem;
        background: white;
        color: #EF5423;
        border-radius: .5rem;
        border: 1px solid #EF5423;
    }
</style>


